<template>
    <div class="login-pages">

           <header-view></header-view>
        <div class="entrust-img">
            <img src="../assets/images/index-img1.png">
            <div class="entrust-img-wrap">
                <div class="entrust-img-text">
                    <p>中山厂房网 真厂房</p>
                </div>
            </div>
        </div>

        <div class="login-wrap">
            <div class="login-title">登录/注册</div>
            <div class="login-list-common login-list">
                <label class="login-label">手机号码</label>
                <input type="text" placeholder="请输入手机号码" v-model="Phone"/>
            </div>
            <div class="login-list-1">
                <div class="login-list-common">
                    <label class="login-label">验证码</label>
                    <input type="text" name="" placeholder="请输入验证码" v-model="Code"/>
                </div>
                <button class="login-button" :disabled="disabled" @click="getCode">{{ btntxt }}</button>
            </div>
            <p class="login-error">{{ error }}</p>
            <div class="login-submit" @click="login"><a>立即登录</a></div>
            <div class="login-tip">登录代表您同意<a href="javascript:void(0)">《用户协议》</a></div>
        </div>
        <alert :message='message' v-if="openMessage" @closeBtn="closeMessage"></alert>
    </div>
</template>

<script>
    import alert from '../components/public/alert'
    export default {
        name: 'login',
        components:{alert},
        data() {
            return {
                Phone:'',
                Code:'',
                error:'',
                time:0,
                disabled:false,
                btntxt:'获取验证码',
                openMessage:false,
                message:''
            };
        },
        methods: {
           getCode(){
            var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
                if(this.Phone == '') {
                  this.error = '手机号不能为空'
                }else if(!reg.test(this.Phone)){
                  this.error = '手机格式不正确'
                }else{
                  this.error='';
                this.$post('/api/sendVerifyCode',{mobile:this.Phone}).then(res=>{
                    if(res.code == 0){
                        this.time = 60;
                        this.disabled = true;
                        this.timer();
                    }else{
                        this.error = res.data
                    }
                })                
            }
           },
           timer(){
              if(this.time>0){
                this.time--;
                this.btntxt=this.time+'s';
                setTimeout(this.timer,1000);
              }else{
                this.time=0;
                this.btntxt='获取验证码';
                this.disabled=false;
              }
            },
            login(){
                if(this.Phone == ''){
                    this.error = '手机号不能为空'
                }else if(this.Code == ''){
                    this.error = '验证码不能为空'
                }else{
                    this.$post('/api/login',{mobile:this.Phone,code:this.Code,type:1}).then(res=>{
                        if(res.code == 0){
                            console.log(res.data)
                            localStorage.setItem('token1',res.data.access_token)
                            this.openMessage = true
                            this.message = '登录成功'
                        }else{
                            this.error = res.data
                        }
                    })
                }
            },
             goback() {
                if (window.history.length <= 1) {
                    this.$router.push('/');
                } else {
                    this.$router.go(-1);
                }
            },
            closeMessage(){
                this.openMessage = false
                if (window.history.length <= 1) {
                    this.$router.push('/');
                } else {
                    this.$router.go(-1);
                }
            }
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    @import '../assets/css/index.css';
    .entrust-img{
        position: relative;
    }
    .entrust-img-wrap{
        display: -webkit-flex;
        align-items:center;
        justify-content:center; 
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background-color: rgba(0,0,0,0.3);
    }
    .entrust-img-text{
        vertical-align: middle;
    }
    .entrust-img-text p{
        font-size: 34px;
        color: #fff;
    }
    .index-header {padding:30px 25px 50px;background:url(../assets/images/banner-bg2.jpg) 50% 50% no-repeat;background-size:cover;position: relative;}
    .index-header .back {position:absolute;top:10px;left:15px;z-index:10;width:30px;height:30px;font-size:20px;color:#fff;overflow:hidden;text-align: center;line-height: 30px;background-color: rgba(255,255,255,0.3);border-radius: 50%;}
    .index-header .slogan {display: block;max-width: 280px;height: auto;width: 100%;}
    .index-header .city {display: inline-block;margin-top: 70px;color: #fff;background: url(../assets/images/icon1.png) no-repeat 12px center rgba(0,0,0,0.5);background-size: 12px auto;padding: 4px 12px 4px 30px;border-radius: 20px;font-size: 16px;visibility: hidden;}
    .index-header .back:before {
        position: absolute;
        top: 8px;
        right: auto;
        bottom: auto;
        left: 12px;
        z-index: 100;
        display: block;
        content: "";
        width: 12px;
        height: 12px;
        border-width: 0 0 2px 2px;
        border-style: solid;
        border-color: #fff;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .login-wrap{
        position: relative;
        width: 86%;
        margin: -35px auto 0;
        background-color: #fff;
        z-index: 100;
        border-radius: 5px;
        box-shadow: 0px 2px 5px rgba(0,0,0,0.3);
        padding: 30px 4% 100px;
    }
    .login-title{
        font-size: 18px;
        color: #333;
        text-align: center;
        font-weight: bold;
        padding-bottom: 10px;
        border-bottom: 1px solid #d8d8d8;
    }
    .login-list{
        margin-top: 24px;
    }
    .login-list-common{
        display: flex;
        display: -webkit-flex;
        border:1px solid #d8d8d8;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        background-color: #f6f5f5;
    }
    .login-list-common input{
        border:none;
        outline: none;
        flex-grow: 1;
        flex-shrink: 0;
        padding-left: 9px;
        background-color: #f6f5f5;
    }
    .login-list-common label{
        display: inline-block;
        width:69px;
        flex-shrink: 0;
        height: 26px;
        line-height: 26px;
        padding-right: 9px;
        text-align: right;
        margin-top: 7px;
        border-right: 1px solid #d8d8d8;
    }
    .login-list-1{
        margin-top: 12px;
        overflow: hidden;
    }
    .login-list-1 .login-button{
        float: right;
        width: 30%;
        padding: 0;
        height: 40px;
        border: 1px solid #d0001c;
        background-color: #fff;
        color: #d0001c; 
        outline: none;
    }
    .login-list-1 .login-list-common{
        overflow: hidden;
        float: left;
        width: 65%;
        display: flex;
        display: -webkit-flex;
    }
    .login-error{
        margin: 15px 0 25px;
        height: 15px;
        color: #e6222a;
    }
    .login-submit{
        margin:0 auto 5px;
        width: 45%;
    }
    .login-submit a{
        display: block;
        width: 100%;
        height: 35px;
        line-height: 35px;
        background-color: #e6222a;
        font-size: 14px;
        color: #fff;
        text-align: center;
        border-radius: 4px;
    }
    .login-tip{
        font-size: 12px;
        color: #b6b6b6;
        text-align: center;
    }
    .login-tip a{
        color: #e62129;
    }
    @media screen and (max-width:320px){
        .index-header .city{
            margin-top: 0px;
        }
        .login-wrap{
            padding: 15px 4% 20px;
        }
        .login-error{
            margin: 6px 0 6px;
        }
    }
</style>
